<template>
	<tm-fullView>
		<c-menubars :showback="false" theme="white" color="white" :flat="true">
			<template #left>
				<view class="px-20 flex flex-center">
					<tm-icons name="icon-position" :color="black_theme ? 'grey' : 'black'" :size="48"></tm-icons>
					<view class="fulled max-content ml-15">
						<text>北京</text>
					</view>
				</view>
			</template>
			<template slot="default">
				<view></view>
			</template>
		</c-menubars>
		<tm-sheet :flat="true" :padding="[40, 44]" :margin="[0, 0]">
			<uni-row :gutter="15">
				<template v-for="(item, index) in rowList1">
					<uni-col :span="8">
						<view class="row-item round-5 flex flex-between flex-center px-20" :class="[item.bgClass, black_theme ? 'bk' : '']">
							<view class="flex-col">
								<view>
									<text class="text-size-n">{{ item.left.title }}</text>
								</view>
								<view>
									<text class="text-size-xs">{{ item.left.subTitle }}</text>
								</view>
							</view>
							<view>
								<image :src="`/${item.right.icon}`" class="row-item_icon relative l-10 t-5" :style="{transform: `scale(${item.right.scale})`}"></image>
								<!-- <view class="relative l-10 t-5" :style="{transform: `scale(${item.right.scale})`}">
									<tm-images :src="item.right.icon" :width="52" :height="52"></tm-images>
								</view> -->
							</view>
						</view>
					</uni-col>
				</template>
			</uni-row>
			<view class="mt-50">
				<view>
					<c-title title="探索附近" value="查看更多"></c-title>
				</view>
			</view>
			<view class="mt-0">
				<uni-row :gutter="20">
					<template v-for="(item, index) in rowList2">
						<uni-col :span="12">
							<view class="col-view-item round-10 mt-20 relative">
								<tm-images :src="item.img" :width="330" :height="330" :round="5" model="aspectFill"></tm-images>
								<view class="absolute col-view-item round-5 flex-col flex-between t-0">
									<view class="fulled">
										<view class="pa-20 flex col-view_top flex-between">
											<view>
												<tm-images :src="item.top.left.icon" :width="110" :height="38" model="widthFix" v-if="item.top && item.top.left && item.top.left.icon"></tm-images>
											</view>
											<tm-tags :rounded="true" model="fill" color="tag-accent" v-if="item.top && item.top.right && item.top.right.text">{{ item.top.right.text }}</tm-tags>
										</view>
									</view>
									<view class="fulled round-5">
										<view class="px-20 py-10 flex-between col-view_bottom round-5">
											<view>
												<text class="text-white text-size-n" :class="black_theme ? 'text-grey-lighten-2' : ''">{{ item.name }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-col>
					</template>
				</uni-row>
			</view>
			<tm-flotbutton :offset="[16, 32]" label="暗黑" :show-text="true" color="bg-gradient-purple-accent" icon="icon-lightbulb" @click="changeTheme"></tm-flotbutton>
		</tm-sheet>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				rowList1: [{
					bgClass: "bg-gradient-green-accent",
					left: {
						title: '明星活动',
						subTitle: '点击查看'
					},
					right: {
						icon: "static/live/mxhd_top.png",
						scale: 1.3
					}
				}, {
					bgClass: "bg-gradient-blue-accent",
					left: {
						title: '主播电台',
						subTitle: '点击查看',
					},
					right: {
						icon: "static/live/zbdt_top.png",
						scale: 1.3
					}
				}, {
					bgClass: "bg-gradient-purple-accent",
					left: {
						title: '直播派对',
						subTitle: '点击查看'
					},
					right: {
						icon: "static/live/zbpd_top.png",
						scale: 1.3
					}
				}],
				rowList2: [{
					img: 'https://img.js.design/assets/img/616678ebc7bf4c487aedb5b1.jpg',
					name: '232.9km',
					top: {
						left: {
							// icon: 'static/live/huati.png'
						},
						right: {
							text: '新人主播'
						}
					}
				}, {
					img: 'https://img.js.design/assets/img/616678eb144489bffcefc3f4.jpg',
					name: '22.9km',
				}, {
					img: 'https://img.js.design/assets/img/616678eb1444897952efc3f5.jpg',
					name: '9km',
				}, {
					img: 'https://img.js.design/assets/img/616678eb2769e00d41966add.jpg',
					name: '300m'
				}, {
					img: 'https://img.js.design/assets/img/616678ebc7bf4cfb0bedb5b2.jpg',
					name: '232.9km',
				}, {
					img: 'https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg',
					name: '232.9km',
				}]
			}
		},
		onReady() {
			this.sysinfo = uni.getSystemInfoSync();
			console.log(this.sysinfo);
			// this.$tm.theme.setBlack(true);
		},
		computed: {
			black_theme: function() {
				return this.$tm.vx.state().tmVuetify.black;
			}
		},
		methods: {
			changeTheme() {
				this.$tm.theme.setBlack(!this.black_theme);
			}
		}
	}
</script>

<style>
	.row-item {
		height: 116rpx;
	}
	.bg-gradient-green-accent {
		background: linear-gradient(137.99deg, rgba(39, 230, 115, 1) 0%, rgba(52, 247, 244, 1) 100%) !important;
	}
	.bg-gradient-blue-accent {
		background: linear-gradient(135deg, rgba(79, 185, 255, 1) 0%, rgba(99, 112, 255, 1) 100%) !important;
	}
	.bg-gradient-purple-accent {
		background: linear-gradient(135deg, rgba(159, 94, 255, 1) 0%, rgba(196, 87, 255, 1) 100%) !important;
	}
	.row-item_icon {
		width: 52rpx;
		height: 52rpx;
		transform: scale(1.2);
	}
	.col-view-item {
		width: 330rpx;
		height: 330rpx;
	}
	.col-view_bottom {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 99.94%);
	}
	.col-view_top {
		height: 38rpx;
	}
	.col-view-image {
		width: 110rpx;height: 38rpx;
	}
</style>
